<template>
<div>
  <h2>{{msg}}</h2>
  <h4>{{$store.state.count}}--------------{{count}}</h4>
  <button style="padding: 5px 8px" type="button" @click="$store.commit('add',10)">&nbsp;+&nbsp;</button>
  <button style="padding: 5px 8px" type="button" @click="reduce">&nbsp;-&nbsp;</button>
  <!--<button style="padding: 5px 8px" type="button" @click="$store.commit('reduce')">&nbsp;-&nbsp;</button>-->
</div>
</template>

<script>
  import store from "@/vuex/store";
  import { mapState,mapMutations,mapGetters } from "vuex";
  export default {
    name: "count",
    store,
    data() {
          return {
            msg:"Hello Vuex"
          }
    },
    computed:{
      ...mapState(["count"]),
      ...mapGetters(["count"]),
    },
    methods:mapMutations(["add","reduce"])
  }
</script>

<style scoped>

</style>
